<template>
	<div class="box">
		<div>
			<div>
				<el-card class="card-01">
					<div class="zhpj">
						<span class="zhpj-span">综合评价</span>
					</div>
					<div class="echarts-01">
						<div class="lh-css">良好</div>
						<div class="wdsd-css">
							<div>
								<div class="dushu-01">
									<p class="wendu">温度</p>
									<p class="dushu">
										23.1<span class="spancdu">℃</span>
									</p>
									<p class="fangwei">（18~20）</p>
								</div>
								<div>
									<p class="wendu">二氧化碳</p>
									<p class="dushu">
										560.3<span class="spancdu">ppm</span>
									</p>
									<p class="fangwei">（≤1,000）</p>
								</div>
							</div>

							<div>
								<div class="dushu-01">
									<p class="wendu">湿度</p>
									<p class="dushu">
										56.3<span class="spancdu">%</span>
									</p>
									<p class="fangwei">（30~60）</p>
								</div>
								<div>
									<p class="wendu">PM2.5</p>
									<p class="dushu">
										32.1<span class="spancdu">µg/m³</span>
									</p>
									<p class="fangwei">（≤1,000）</p>
								</div>
							</div>
						</div>
					</div>
					<div class="echats-main">
						<div
							id="main"
							style="width: 500px; height: 200px"
						></div>
						<div class="title-echrts">总体趋势</div>
						<div class="select-css">
							<el-select placeholder="CO₂">
								<el-option label="Zone one" value="shanghai" />
								<el-option label="Zone two" value="beijing" />
							</el-select>
						</div>

						<div class="selectRiqi">
							<el-date-picker
								v-model="datetime"
								type="date"
								placeholder="请选择日期"
							/>
						</div>
					</div>
				</el-card>
			</div>

			<div>
				<div>
					<el-card class="card-02">
						<div class="zhpj">
							<span class="zhpj-span">典型点位信息</span>
						</div>

						<!-- 办公大堂 -->
						<div class="bangong">办公大堂</div>
						<div class="echarts-01">
							<div class="lh-css">良好</div>
							<div class="wdsd-css">
								<div>
									<div class="dushu-01">
										<p class="wendu">温度</p>
										<p class="dushu">
											23.1<span class="spancdu">℃</span>
										</p>
										<p class="fangwei">（18~20）</p>
									</div>
									<div>
										<p class="wendu">二氧化碳</p>
										<p class="dushu">
											560.3<span class="spancdu"
												>ppm</span
											>
										</p>
										<p class="fangwei">（≤1,000）</p>
									</div>
								</div>

								<div>
									<div class="dushu-01">
										<p class="wendu">湿度</p>
										<p class="dushu">
											56.3<span class="spancdu">%</span>
										</p>
										<p class="fangwei">（30~60）</p>
									</div>
									<div>
										<p class="wendu">PM2.5</p>
										<p class="dushu">
											32.1<span class="spancdu"
												>µg/m³</span
											>
										</p>
										<p class="fangwei">（≤1,000）</p>
									</div>
								</div>
							</div>
						</div>
						<div class="echats-main">
							<div
								id="main2"
								style="width: 500px; height: 200px"
							></div>
							<div class="title-echrts">趋势</div>
							<div class="select-css">
								<el-select placeholder="PM2.5">
									<el-option
										label="Zone one"
										value="shanghai"
									/>
									<el-option
										label="Zone two"
										value="beijing"
									/>
								</el-select>
							</div>

							<div class="selectRiqi">
								<el-date-picker
									v-model="datetime"
									type="date"
									placeholder="请选择日期"
								/>
							</div>
							<div class="xuxian"></div>
						</div>

						<!-- 办公区域 -->
						<div>
							<div class="bangong1">办公区域</div>
							<div class="echarts-02">
								<div class="lh-css">良好</div>
								<div class="wdsd-css">
									<div>
										<div class="dushu-01">
											<p class="wendu">温度</p>
											<p class="dushu">
												23.1<span class="spancdu"
													>℃</span
												>
											</p>
											<p class="fangwei">（18~20）</p>
										</div>
										<div>
											<p class="wendu">二氧化碳</p>
											<p class="dushu">
												560.3<span class="spancdu"
													>ppm</span
												>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>

									<div>
										<div class="dushu-01">
											<p class="wendu">湿度</p>
											<p class="dushu">
												56.3<span class="spancdu"
													>%</span
												>
											</p>
											<p class="fangwei">（30~60）</p>
										</div>
										<div>
											<p class="wendu">PM2.5</p>
											<p class="dushu">
												32.1<span class="spancdu"
													>µg/m³</span
												>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>
								</div>
							</div>
							<div class="echats-main">
								<div
									id="main3"
									style="width: 500px; height: 200px"
								></div>
								<div class="title-echrts">趋势</div>
								<div class="select-css">
									<el-select placeholder="温度">
										<el-option
											label="Zone one"
											value="shanghai"
										/>
										<el-option
											label="Zone two"
											value="beijing"
										/>
									</el-select>
								</div>

								<div class="selectRiqi">
									<el-date-picker
										v-model="datetime"
										type="date"
										placeholder="请选择日期"
									/>
								</div>
								<div class="xuxian"></div>
							</div>
						</div>

						<!-- 商业区域 -->
						<div>
							<div class="bangong1">商业区域</div>
							<div class="echarts-02">
								<div class="lh-css">良好</div>
								<div class="wdsd-css">
									<div>
										<div class="dushu-01">
											<p class="wendu">温度</p>
											<p class="dushu">
												23.1<span class="spancdu"
													>℃</span
												>
											</p>
											<p class="fangwei">（18~20）</p>
										</div>
										<div>
											<p class="wendu">二氧化碳</p>
											<p class="dushu">
												560.3<span class="spancdu"
													>ppm</span
												>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>

									<div>
										<div class="dushu-01">
											<p class="wendu">湿度</p>
											<p class="dushu">
												56.3<span class="spancdu"
													>%</span
												>
											</p>
											<p class="fangwei">（30~60）</p>
										</div>
										<div>
											<p class="wendu">PM2.5</p>
											<p class="dushu">
												32.1<span class="spancdu"
													>µg/m³</span
												>
											</p>
											<p class="fangwei">（≤1,000）</p>
										</div>
									</div>
								</div>
							</div>
							<div class="echats-main">
								<div
									id="main4"
									style="width: 500px; height: 200px"
								></div>
								<div class="title-echrts">趋势</div>
								<div class="select-css">
									<el-select placeholder="温度">
										<el-option
											label="Zone one"
											value="shanghai"
										/>
										<el-option
											label="Zone two"
											value="beijing"
										/>
									</el-select>
								</div>

								<div class="selectRiqi">
									<el-date-picker
										v-model="datetime"
										type="date"
										placeholder="请选择日期"
									/>
								</div>
								<div class="xuxian"></div>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>

		<div>
			<el-card class="card-03">
				<div class="zhpj">
					<span class="zhpj-span">防疫模式</span>
				</div>

				<div class="switch-css">
					<div>
						<span>商场区域</span>
						<el-switch v-model="value1" class="mb-2" />
					</div>
					<div>
						<span>办公大厅</span>
						<el-switch v-model="value1" class="mb-2" />
					</div>

					<div>
						<span>办公区域（走道？典型办公室？）</span>
						<el-switch v-model="value1" class="mb-2" />
					</div>
				</div>
			</el-card>

			<el-card class="card-04">
				<div class="zhpj">
					<span class="zhpj-span">区域舒适性</span>
				</div>

				<div class="anniu">
					<div
						:class="indexValue == 0 ? 'bccolorDiv' : 'Div'"
						@click="qiehuan(0)"
					>
						<span> 温度场</span>
					</div>
					<div
						:class="indexValue == 1 ? 'bccolorDiv' : 'Div'"
						@click="qiehuan(1)"
					>
						<span> 湿度场</span>
					</div>
					<div
						:class="indexValue == 2 ? 'bccolorDiv' : 'Div'"
						@click="qiehuan(2)"
					>
						<span> CO₂场</span>
					</div>
					<div
						:class="indexValue == 3 ? 'bccolorDiv' : 'Div'"
						@click="qiehuan(3)"
					>
						<span>PM场</span>
					</div>
				</div>
				<div class="block">
					<el-date-picker
						v-model="datetimes"
						type="date"
						placeholder="请选择时间"
					/>
				</div>
				<div v-show="indexValue == 0">
					<div id="main5" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 1">
					<div id="main7" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 2">
					<div id="main8" style="width: 800px; height: 882px"></div>
				</div>

				<div v-show="indexValue == 3">
					<div id="main9" style="width: 800px; height: 882px"></div>
				</div>

			</el-card>

			<el-card class="card-05">
				<div class="zhpj">
					<span class="zhpj-span">相关性分析</span>
					<div class="select-css">
						<div class="select01">
							<el-select placeholder="温度">
								<el-option label="Zone one" value="shanghai" />
								<el-option label="Zone two" value="beijing" />
							</el-select>
						</div>

						<div class="select02">
							<el-select placeholder="CO₂">
								<el-option label="Zone one" value="shanghai" />
								<el-option label="Zone two" value="beijing" />
							</el-select>
						</div>

						<div class="block_time">
							<el-date-picker
								v-model="start_end_time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							/>
						</div>
					</div>
				</div>
				<div class="main6">
					<div class="dwxshi">单位显示</div>
					<div id="main6" style="width: 800px; height: 265px"></div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import packagingEchats from "@/components/packagingEchats/index";
const value1 = ref(true);
const indexValue = ref(0);
const datetimes = ref("");

const start_end_time = ref("");
const qiehuan = (i) => {
	indexValue.value = i;
};

onMounted(() => {
	packagingEchats();
});
</script>

<style lang="less" scoped>
.box {
	display: flex;
	.card-01 {
		margin-left: 40px;
		width: 904px;
		height: 302px;
		position: relative;
		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 1000px;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}
		.echarts-01 {
			margin-top: 70px;
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;
			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}
			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;
				.dushu-01 {
					margin-bottom: 32px;
				}
				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;
					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}
				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}
				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}
		#main {
			margin-left: 280px;
			bottom: 70px;
		}
		.select-css {
			position: absolute;
			width: 100px;
			bottom: 190px;
			margin-left: 605px;
		}
		.selectRiqi {
			position: absolute;
			bottom: 190px;
			margin-left: 725px;
			width: 144px;
			:deep(.el-input__inner) {
				width: 140px;
			}
		}
		.title-echrts {
			position: absolute;
			bottom: 203px;
			margin-left: 290px;
			font-size: 14px;
			color: #7f7f7f;
		}
		.echats-main {
			display: flex;
		}
	}

	.card-02 {
		margin-left: 40px;
		width: 904px;
		height: 980px;
		margin-top: 24px;
		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 904px;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.bangong {
			position: absolute;
			margin-top: 70px;
			margin-left: 16px;
			font-size: 16px;
			color: #7f7f7f;
		}

		.bangong1 {
			margin-top: 20px;
			padding-bottom: 20px;
			margin-left: 16px;
			font-size: 16px;
			color: #7f7f7f;
		}
		.echarts-01 {
			margin-top: 100px;
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;

			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}
			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;
				.dushu-01 {
					margin-bottom: 32px;
				}
				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;
					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}
				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}
				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}

		.echarts-02 {
			margin-left: 10px;
			width: 77px;
			height: 59px;
			border: 1px solid #7f7f7f;
			border-radius: 8px;
			display: flex;
			position: relative;

			.lh-css {
				margin: auto;
				font-family: SourceHanSansSC-regular;
				font-weight: 800;
				color: #fecc30;
				font-size: 24px;
			}
			.wdsd-css {
				display: flex;
				position: absolute;
				margin-left: 100px;
				.dushu-01 {
					margin-bottom: 32px;
				}
				.wendu {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
				.dushu {
					font-family: SourceHanSansSC-regular;
					font-weight: normal;
					color: #277bcb;
					font-size: 22px;
					margin-bottom: 4px;
					.spancdu {
						color: #7e7e7e;
						font-size: 12px;
					}
				}
				.fangwei {
					color: #7e7e7e;
					font-size: 12px;
					margin-left: -9px;
				}
				.eyht {
					font-family: SourceHanSansSC-regular;
					color: #7e7e7e;
					font-size: 14px;
					margin-bottom: 4px;
				}
			}
		}
		#main2 {
			margin-left: 280px;
			bottom: 70px;
		}
		#main3 {
			margin-left: 280px;
			bottom: 70px;
		}

		#main4 {
			margin-left: 280px;
			bottom: 70px;
		}
		.select-css {
			display: flex;
			position: absolute;
			width: 100px;
			bottom: 240px;
			margin-left: 605px;
		}
		.selectRiqi {
			position: absolute;
			bottom: 240px;
			margin-left: 725px;
			width: 144px;
			:deep(.el-input__inner) {
				width: 140px;
			}
		}
		.title-echrts {
			position: absolute;
			bottom: 250px;
			margin-left: 290px;
			font-size: 14px;
			color: #7f7f7f;
		}
		.echats-main {
			display: flex;
			position: relative;
			border-bottom: 1px dotted #dbe0ed;
			.xuxian {
				border-bottom: 1px dotted #dbe0ed;
			}
		}
	}

	.card-03 {
		width: 860px;
		height: 145px;
		margin-left: 20px;
		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 860px;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}
		.switch-css {
			display: flex;
			margin-top: 70px;
			justify-content: space-between;
			:deep(.el-switch.is-checked .el-switch__core) {
				border-color: #8faadc;
				background-color: #8faadc;
			}
			span {
				margin-right: 20px;
			}
		}
	}

	.card-04 {
		width: 860px;
		margin-left: 20px;
		margin-top: 20px;
		height: 700px;
		display: flex;
		.zhpj {
			display: flex;
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 860px;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.anniu > div:first-child {
			margin-left: 420px;
		}
		.anniu {
			display: flex;
			.bccolorDiv {
				width: 80px;
				height: 30px;
				background-color: #dbe0ed;
				border-radius: 4px;
				position: relative;
				margin-left: 20px;
				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #4d62a5;
				}
			}

			.Div {
				width: 80px;
				height: 30px;
				background-color: #ebebeb;
				border-radius: 4px;
				position: relative;
				margin-left: 20px;
				span {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.block {
			margin-top: 40px;
			margin-left: 590px;
		}
	}

	.card-05 {
		width: 860px;
		margin-left: 20px;
		margin-top: 20px;
		height: 420px;
		.zhpj {
			display: flex;
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 860px;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}
		.select-css {
			display: flex;
			.select01 {
				width: 100px;
				margin-left: 130px;
			}
			.select02 {
				width: 100px;
				margin-left: 30px;
			}
			.block_time {
				margin-left: 20px;
			}
		}

		.main6 {
			.dwxshi {
				margin-top: 80px;
			}
			margin-top: 50px;
		}
	}
}
</style>
